<template>
	<view style="height:100%;">
		<view class="" v-if="newList.length!=0">
			<view hover-class="bs-hover" class="bs-list" v-for="(item,index) in newList" :key="index" @click="handNavDetails(item)">
				<view class="" v-if="showIcon">
					<image v-if="item.schedule==1||item.schedule==2||item.schedule==3" class='list-icon' :src="imgUrl+'baomingzhong.png'"
					 mode=""></image>
					<image v-if="item.schedule==4" class='list-icon' :src="imgUrl+'yjieshu.png'" mode=""></image>
					<image v-if="item.schedule==3" class='list-icon' :src="imgUrl+'jinxingzhong.png'" mode=""></image>
					<!-- jinxingzhong -->
				</view>
				<!-- yjieshu -->
				<view class="item">
					<u-image border-radius='12' :fade="true" duration="450" width="274rpx" height="164rpx" :src="item.titleImg"></u-image>
					<view class="item-content">
						<view class="title title-text">
							{{item.title}}
						</view>
						<view class="host content-text">
							主办方：{{item.hostunit}}
						</view>
						<view class="time content-text">
							时间：{{item.startTime}}
						</view>
						<view class="site content-text">
							地区：{{item.address}}
						</view>
					</view>
				</view>
				<view class="mt-40">
					<bs-line></bs-line>
				</view>
			</view>
			<view class="mb-30 mt-30">
				<u-loadmore :status="status" />
			</view>
		</view>
		<u-empty v-if='showEmpty' margin-top='20' font-size='24' icon-size='80' :show='list.length==0' :text="onMsg"></u-empty>
	</view>
</template>

<script>
	export default {
		props: {
			showEmpty: {
				type: Boolean,
				default: true
			},
			onMsg: {
				type: String,
				default: '暂无热门活动'
			},
			showIcon: {
				type: Boolean,
				default: true,
			},
			status: {
				type: String,
				default: 'nomore',
			},
			list: {
				type: Array,
				default: () => []
			},
			props: {
				type: Object,
				default: () => {}
			},
			page: {
				type: Number,
				default: 0,
			}
		},
		computed: {
			newList() {
				//根据传入的key 修改默认key
				if ('{}' != JSON.stringify(this.props) && this.props) {
					for (var i = 0; i < this.list.length; i++) {
						var obj = this.list[i];
						for (var key in obj) {
							var newKey = this.props[key];
							if (newKey) {
								obj[newKey] = obj[key];
								delete obj[key];
							}
						}
					}
				}
				// console.log(this.props, 'props', this.list)
				return this.list
			}
		},
		data() {
			return {
				imgUrl: this.configImgUrl,
			};
		},
		methods: {
			handNavDetails(item) {
				this.$emit('handNavDetails', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bs-hover {
		background-color: rgba(0, 0, 0, .1);
		border-radius: 12rpx;
	}

	.bs-list {
		position: relative;
		height: 100%;
		padding-top: 40rpx;

		.list-icon {
			position: absolute;
			top: 40rpx;
			left: 0;
			width: 74rpx;
			z-index: 1;
			height: 34rpx;
		}

		.item {
			@include my-flex($fd: row, $fw:nowrap);

			.item-content {
				// margin-top: 24rpx;
				margin-left: 24rpx;
				@include my-flex($fd: column, $jc:$bs-sb);

				.title {
					@include ellipsisMultiline(1)
				}
			}
		}
	}
</style>
